<template>
  <div style="width: 1200px;">
    <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            autocomplete="off"
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input
            v-model="form.age"
            autocomplete="off"
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.nan" placeholder="性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.rq"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.dizi" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="chaunzhi(),dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="更改" :visible.sync="dialogForm2Visible">
      <el-form :model="form2">
        <el-form-item label="姓名:" :label-width="formLabelWidth">
          <el-input
            v-model="form2.name"
            autocomplete="off"
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="年龄:" :label-width="formLabelWidth">
          <el-input
            v-model="form2.age"
            autocomplete="off"
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别:" :label-width="formLabelWidth">
          <el-select v-model="form2.nan" placeholder="性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期:" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form2.rq"
            align="right"
            type="date"
            placeholder="选择你出生的日子"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form2.dizi" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm2Visible = false">取 消</el-button>
        <el-button type="primary" @click="genggai11(),dialogForm2Visible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div
      style="
        width: 70%;
        height: 33px;
        margin-left: 550px;
        /* display: flex;
        justify-content: space-between; */
    
      "
    >
      <button
        style="
          width: 60px;
          height: 30px;
          background-color: #409eff;
          border: none;
          border-radius: 5px;
          color: #fff;
        "
        @click="dialogFormVisible = true"
      >
        +新增
      </button>
      <label for=""
        ><input
          type="text"
          style="width: 120px; height: 20px"
          placeholder="请输入"
          v-model="shousiozhi"
        />
        <button
          style="
            color: #fff;
            width: 60px;
            height: 30px;
            background-color: #409eff;
            border: none;
            border-radius: 5px;
          "
          @click="shousio()"
        >
          搜索
        </button>
      </label>
    </div>
    <div style="width: 1400px">
      <table
        border="1"
        cellspacing="0"
        style="
          margin: auto;
          height: 650px;
          width: 90%;
          text-align: center;
          background-color:  rgb(215 241 250);
        "
      >
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>地址</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item, index) in arr" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.nan }}</td>
            <td>{{ item.requestIdle}}</td>
            <td>{{ item. dizisanjk }}</td>
            <td>

              <el-button type="text" @click="genggai(item.id),dialogForm2Visible=true" style="outline: 1px solid black;">编辑</el-button>
              <el-button type="text"  @click="open(item.id)" style="outline: 1px solid black;">删除</el-button>

            </td>
          </tr>
        </thead>
      </table>
      <div  
        style="
          width: 89.9%;
          height: 29px;
          outline: 1px solid #000;
          margin: auto;

          background-color:  rgb(215 241 250);
        "
      >
        <fenyeqi
          :arr="arr.length"
          :arr2="arr2.length"
          :hangshu="this.hangshu"
          @shu="ck"
          style="margin-left: 412px;"
        ></fenyeqi>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import fenyeqi from "./fenyeqi.vue";
export default {
  components: { fenyeqi },
  data() {
    return {
      currentPage1: 5,
      count: 1,
      arr2: "", //更改的数据
      arr: [], //页面数据
      arr1: [], //总数据
      hangshu: 10,
      shousiozhi: "",
      id:99,
      dialogFormVisible: false,
      dialogForm2Visible:false,
      form: {
        name: "",
        age: "",
        rq: "2021-10-1",
        dizi: "",
        nan: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      form2: {
        name: "",
        age: "",
        rq: "",
        dizi: "",
        nan: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      value1: "",
      value2: "",
      val:0
    };
  },
  created() {
    axios.get("https://7nvr3rh17g.hk.aircode.run/ysd").then((response) => {
   
      this.arr1 = response.data.result.user.map((item, index) => {
    return {
      ...item,
      id: index
    }
  });
      this.arr2 = this.arr1;
      this.arr = this.arr1.slice(0, this.hangshu);
    });
  },
  watch: {
    arr1: {
        handler() {
          this.arr = this.arr1.slice(this.val*this.hangshu,this.val* this.hangshu+this.hangshu);
        },
        immediate: true, //一进入页面就执行handler里的代码
        deep: true,
      },
    
  },
  computed: {},
  methods: {
    open(item) {
        this.$confirm('你确定要继续删除?', '提示', {
          confirmButtonText: 'ok',
          cancelButtonText: '突然反悔',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '这条数据无啦!'
          });
          this.shanchu(item); // 在删除成功时调用shanchu方法
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '反悔成功'
          });
        });
      },
    ck(val) {
      this.val=val-1
      this.arr = this.arr2.slice(
      this.val* this.hangshu,
      this.val* this.hangshu + this.hangshu
      );
    },
    shousio() {
      this.arr2 = this.arr1.filter((item) => {
        return item.name.includes(this.shousiozhi);
      });
      this.arr = this.arr2.slice(0, this.hangshu);
    },
    chaunzhi(){
      const date = new Date(this.form.rq);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      this.form.rq = `${year}-${month}-${day}`;
      
     
      if(Boolean(this.form.name) &&Boolean(this.form.age)&&Boolean(this.form.dizi)&&Boolean(this.form.nan)){
        this.id+=1
        let shu={
        name:this.form.name,
        age: this.form.age,
        requestIdle: this.form.rq,
        dizisanjk: this.form.dizi,
        nan:this.form.nan,
        id:this.id
      }
        this.arr1.unshift(shu)
        this.arr2=this.arr1
      }else{
        alert('填写完整')
      }
    },
    
    shanchu(e){
    this.arr1=this.arr1.filter((item) => item.id != e)
    this.arr2 = this.arr1
    this.arr = this.arr2.slice(this.val*this.hangshu,this.val* this.hangshu+this.hangshu);

    },
    genggai(e){
      let shu1=this.arr1.filter((item) => item.id == e)

      this.form2.name=shu1[0].name
      this.form2.age= shu1[0].age,
      this.form2.rq=shu1[0].rq,
      this.form2.dizi=shu1[0].dizi,
      this.form2.nan=shu1[0].nan,
      this.form2.id=shu1[0].id


      
    
      },
      genggai11(){
      const date = new Date(this.form2.rq);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      this.form2.rq = `${year}-${month}-${day}`;
        let shu={
        name:this.form2.name,
        age: this.form2.age,
        requestIdle: this.form2.rq,
        dizisanjk: this.form2.dizi,
        nan:this.form2.nan,
        id:this.form2.id

      }
      this.arr1.unshift(shu)
      this.arr2=this.arr1
      }

  },
  
};
</script>
<style lang='less' scoped>
// td,
// th {
//   border-top: 1px solid #e7e1e1;
//   border-bottom: 1px solid #000;
//   border-left: 0;
//   border-right: 0;
// }
.el-dialog__header {
    padding: 15px 361px 10px;
}
.el-dialog {
    position: relative;
    margin: 0 auto 50px;
    background: #FFF;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-sizing: border-box;
    width: 30%;
} 
</style>
